import React from 'react';
import InputTodo from './subpage/input_header'
import TodoList from './subpage/todo_list'
import TodoPannel from './subpage/down_pannel'
import stroage from  './subpage/stroage'
const log = console.log.bind(console)
// import Signal from 'signals';
// //custom object that dispatch a `started` signal
// var myObject = {
//   started : new signals.Signal()
// };


// function onStarted(param1, param2) {
//   alert(param1 + param2);
// }

class Todo extends React.Component {
  constructor(props) {
    super(props)
    this.stroage = stroage
    this.state = ({
      newTodoVlaue: ''
    })
  }

  render() {
    const list = this.stroage.all()
    // console.log('debug list', list)
    return (
      <section className='todoapp'>
        <div>
          <InputTodo enterCallback={this.addTodo.bind(this)}/>
          <TodoList  data={list} editHandle={this.editTodo.bind(this)}/>
          <TodoPannel/>
        </div>
      </section>
    );
  }

  editTodo(action, id) {
    // const actions = {
    //   'remove': this.stroage.remove,
    //   'complete': this.stroage.complete,
    // }
    log('debug this', this)
    log('debug action', action)
    if(action === 'delete') {
      this.stroage.remove(id)
    }else if(action === 'complete'){
      this.stroage.complete(id)
    }
    this.setState({})
    // actions[action](id)
  }
  addTodo(newTodo) {
    console.log('debug newTodo value', newTodo)
    let todos = this.stroage.set(newTodo, {completed: false})
    log('debug todos', todos)

    this.setState({
      newTodoVlaue: newTodo
    })
  }
}

export default Todo
